<template>
    <view class="container">
        <!-- 顶部区域 -->
		<view class="can-scroll">
			<view class="toparea">
				<view class="top-logo"></view>
				<view class="top-mid">
					<view class="top-search">
						<i class="iconfont">&#xe6a2;</i> <!-- 搜索图标 -->
						<input type="text" class="neumorphic search" placeholder="搜索药材或症状">
						<button class="search-btn">搜索</button>
					</view>
					<view class="sentence">心有膳本医，天地皆方圆</view>
				</view>
				<i class="iconfont">&#xe6a3;</i> <!-- 消息图标 -->
				<view class="decration-back1"></view>
				<view class="decration1"></view>
			</view>
			<!-- 导航栏 -->
			<view class="big-banner">
				<view class="banner-child">中药材</view>
				<view class="banner-child">养生茶</view>
				<view class="banner-child">食疗方</view>
			</view>

			<!-- 商品列表 -->
			<view class="product-list">
				<view class="product">
					<!-- 商品项 -->
					<view class="good" v-for="(item, index) in products" :key="index">
						<navigator :url="'../detail/detail?id='+item.id">
							<view class="good-img" :style="{backgroundImage: 'url('+item.img+')'}"></view>
							<view class="good-desc">
								<view class="good-name">
									<p>{{item.name}}</p>
									<view><p>{{item.desc}}</p></view>
								</view>
								<p class="good-price">{{item.price}}<span>/500g</span></p>
							</view>
						</navigator>
					</view>
				</view>
			</view>

			<!-- 购物车悬浮按钮 -->
			<view class="shop-cart">
				<navigator url="../cart/cart">
					<i class="iconfont">&#xe6a7;</i> <!-- 购物车图标 -->
					<p>购物车</p>
				</navigator>
			</view>
        </view>
        <!-- 底部导航 -->
        <view class="bottom-bar bottom-bar-shop">
			<navigator url="../index/index" class="item">
				<view class="shouye"></view>
				<p>首页</p>
			</navigator>
			<navigator url="../shop/shop" class="item">
				<view class="yaocai"></view>
				<p>药材</p>
			</navigator>
			<navigator url="../user/user" class="item">
				<view class="wode"></view>
				<p>我的</p>
			</navigator>
		</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            products: [
                {
                    id: 1,
                    name: "新疆红花",
                    desc: "活血通经，我看看可不可以皇后",
                    price: "70",
                    img: "../../static/images/1.jpg"
                },
                {
                    id: 1,
                    name: "新疆红花",
                    desc: "活血通经",
                    price: "70",
                    img: "../../static/images/1.jpg"
                },
				{
				    id: 1,
				    name: "新疆红花",
				    desc: "活血通经",
				    price: "70",
				    img: "../../static/images/1.jpg"
				},
				{
				    id: 1,
				    name: "新疆红花",
				    desc: "活血通经",
				    price: "70",
				    img: "../../static/images/1.jpg"
				},
				{
				    id: 1,
				    name: "新疆红花",
				    desc: "活血通经",
				    price: "70",
				    img: "../../static/images/1.jpg"
				},
				{
				    id: 1,
				    name: "新疆红花",
				    desc: "活血通经",
				    price: "70",
				    img: "../../static/images/1.jpg"
				}
            ]
        }
    }
}
</script>

<style scoped>
@import "../../common/common.css";
@import "../../static/icon/font/iconfont.css";

/* 购物页特有样式 */
.container {
	width: 750rpx;
	margin: auto;
	height: 100vh;
	display:flex;
	flex-direction: column;
}
.toparea {
    padding: 20rpx;
    display: flex;
    align-items: center;
}
.top-logo {
    width: 13%;
    height: 94rpx;
	background-image: url("../../static/icon/sucai.png");
    background-position: -308rpx -179rpx;
	background-size: 679rpx auto;
}

.top-mid{
	width: 75%;
	display: flex;
	flex-direction: column;
}
.top-search {
	width:100%;
	margin:0;
	padding-top: 15rpx;
	display: flex;
	justify-content: center;
	position:relative;
	align-items: center;
}
.sentence{
	width:100%;
	margin-top:18rpx;
	font-size: 18rpx;
	text-align: center;
}
.search{
	width:100%;
	height: 40rpx;
	padding-left: 36rpx;
	font-size: 16rpx;
	border: 1rpx solid #c5c4c4;
	border-right: none;
	box-shadow: inset 4rpx 4rpx 8rpx #d9d6d2, 
				inset -4rpx -4rpx 8rpx #ffffff;
	outline: none;
}
.top-search .iconfont{
	font-size: 24rpx;
	position: absolute;
	top:22rpx;
	left:8rpx;
}
.search-btn{
	width: 15%;
	height: 40rpx;
	font-size: 16rpx;
	border-radius: 0 20rpx 20rpx 0;
	border: none;
	background-color: rgb(160, 175, 110);
	color:#fff;
	text-align: center;
	white-space: nowrap; 
	display: flex;
	justify-content: center; 
	align-items: center; 
}
.toparea>.iconfont{
	font-size: 60rpx;
	padding-bottom: 22rpx;
	padding-left: 20rpx;
	margin:0rpx 0rpx;
	border-radius: 40rpx;
}
/* 导航栏 */
.banner{
	width: 100%;
}
.big-banner{
	width: 100%;
	background-color: rgba(173, 185, 134,0.9);
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	gap:15%;
	padding: 0 70rpx;
	margin: 20rpx 0;
}
.big-banner .banner-child{
	width: 150rpx;
	height: 80rpx;
	border-left: 1.5rpx solid #ededc0;
	border-right: 1.5rpx solid  #ededc0;
	font-size: 32rpx;
	text-align: center;
}

.big-banner .banner-child:hover{
	background-color: #efefda;
}

.small-banner{
	width: 100%;
	height: 40rpx;
	background-color: rgb(236,228,213);
	display: flex;
	text-align: center;
	padding-left: 50rpx;
	transition: min-height 0.5s ease;
}
.small-banner-left{
	width: 56%;
	display: flex;
	gap:12%;
}
.small-banner .banner-element-red{
	background-color: rgb(190, 153, 156);
	width: 22%;
	height: 40rpx;
	font-size: 18rpx;
	align-content: center;
	border-radius: 6rpx;
}
.small-banner .banner-element-gre{
	background-color: rgb(173, 185, 134);;
	width: 22%;
	height: 40rpx;
	font-size: 18rpx;
	align-content: center;
	border-radius: 6rpx;
}

.symptom-selector {
	position: relative;
	/* 保持原宽度和高度，默认只显示“症状选择”文字 */
	width: 22%;
	height: 40rpx;
	font-size: 18rpx;
	align-content: center;
	border-radius: 6rpx;
	cursor: pointer; /* 鼠标悬浮时显示指针，提示可交互 */
}
.symptom-default {
	line-height: 40rpx; /* 垂直居中 */
	transition: opacity 0.3s ease;
}
.symptom-selected-box {
	width: 100rpx; /* 固定宽度 */
	height: 24rpx; /* 固定高度，避免影响布局 */
	margin: 0 auto; /* 水平居中 */
	overflow: hidden; /* 隐藏超出部分 */
	border: 1rpx solid #d9d2d2; /* 边框，区分显示区域 */
	border-radius: 4rpx;
	background: #fff; /* 白色背景，突出文字 */
	display: none; /* 默认隐藏，选中选项后显示 */
}
.symptom-selected-text {
	white-space: nowrap; /* 文字不换行 */
	padding: 0 4rpx;
	line-height: 24rpx; /* 垂直居中 */
	/* 显示横向滚动条（仅当超出时） */
	overflow-x: auto;
	/* 美化滚动条（可选，适配主流浏览器） */
	&::-webkit-scrollbar {
		height: 4rpx; /* 滚动条高度 */
	}
	&::-webkit-scrollbar-thumb {
		background: #c99b9b; /* 滚动条颜色 */
		border-radius: 2rpx;
	}
}
/* 3. 复选框面板：hover 时显示在症状选择下方 */
.symptom-checkbox-panel {
	position: absolute;
	top: 100%; /* 定位在症状选择容器正下方 */
	left: 50%;
	transform: translateX(-50%); /* 水平居中 */
	width: 180rpx; /* 面板宽度，可调整 */
	padding: 12rpx;
	background: #fff;
	border-radius: 12ruguorpx;
	box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
	display: none; /* 默认隐藏 */
	grid-template-columns: repeat(2, 1fr); /* 复选框分2列排列，更整齐 */
	gap: 8rpx; /* 复选框之间的间距 */
	z-index: 10; /* 确保面板在最上层，不被遮挡 */
}
/* 复选框样式优化 */
.symptom-checkbox-panel label {
	font-size: 14rpx;
	color: #333;
	cursor: pointer;
}
.symptom-checkbox-panel input {
	margin-right: 4rpx;
}

/* 关键：hover 症状选择容器时的状态变化 */
.symptom-selector{
	/* 1. 显示复选框面板 */
	.symptom-checkbox-panel {
		display: grid;
	}
}
/* 当有选中项时：显示选中文字框，隐藏默认文字 */
.symptom-selector.has-selected {
	.symptom-default {
		display: none;
	}
	.symptom-selected-box {
		display: block;
	}
}

.banner-decide{
	width: 44%;
	height: 40rpx;
	font-size: 18rpx;
	align-items: center;
	align-content: center;
}
.banner-decide button{
	width: 30%;
	height: 32rpx;
	font-size: 18rpx;
	border: none;
	background-color: #fff;
	border-radius: 8rpx;
}
.banner-decide span{
	font-size: 10rpx;
	margin-left: 10rpx;
}

/* 产品 */
.product-list{
	width: 100%;
}
.product{
	width: 96%;
	margin: 20rpx auto;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 80rpx;
}
.good{
	width: 47%;
	height: 256rpx;
	margin: auto;
	margin-bottom: 20rpx;
}
.good-img{
	width: 90%;
	height:166rpx;
	margin: 5rpx auto;
	border-radius: 20rpx;
	background-image: url("../../static/images/1.jpg");
	background-position:-650rpx -1200rpx;
	background-size: 640rpx auto;
}
.good-desc{
	display: flex;
}
.good-name{
	display: flex;
	flex-direction: column;
	width: 66%;
	text-align: center;
	align-items: center;
	padding-left: 30rpx;
}
.good-name>p{
	font-size: 28rpx;
	line-height: 28rpx;
	margin-top: 5rpx;
}
/* .good-name>view>p{
	font-size: 12rpx;
	line-height: 12rpx;
	margin-top: 10rpx;
	color: #767973;
	font-size: clamp(12rpx, 4vw, 24rpx); /* 响应式字体大小 
} */
.good-name>view {
  width: 150rpx; /* 根据实际调整 */
  height: 30rpx; /* 固定高度！这是关键 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.good-name>view>p {
  font-size: 20rpx;
  line-height: 1.2;
  color: #767973;
  text-align: center;
  width: 100%;
  /* 强制最多显示1行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.good-price{
	margin-top: 12rpx;
	font-size: 28rpx;
	align-content: center;
	color: #794c4c;
}
.good-price span{
	font-size: 12rpx;
}
.good navigator{
	display: block;
	width: 100%; 
	height: 100%; 
	background-color: rgb(236,228,213);
	border-radius: 20rpx;
	padding-top: 8rpx;
}
.good navigator:hover{
	transform: translateY(-2rpx);
	box-shadow: 0 15rpx 30rpx rgba(0,0,0,0.1);
	transition: all 0.5s ease;
}

/* 购物车 */
.shop-cart{
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	background-color: rgb(173, 185, 134);;
	text-align: center;
	position: fixed;
	bottom: 120rpx;
	left:600rpx;
}

.shop-cart .iconfont{
	font-size: 66rpx;
}
.shop-cart p{
	font-size: 20rpx;
}
.shop-cart a:hover{
	color:#efefda
}
</style>